<template>
  <nav class="navbar">
    <div class="navbar-logo">
      <img src="@/assets/logo.png" alt="logo" />
      <div class="navbar-title">
        <div class="title-main">党建平台</div>
        <div class="title-sub">红心向党</div>
        <div class="title-description">江西师范大学软件学院党建平台</div>
      </div>
    </div>
    <div class="navbar-links">
      <a href="#" class="nav-link">首页</a>
      <a href="#" class="nav-link">党建快讯</a>
      <a href="#" class="nav-link">产品价值</a>
      <a href="#" class="nav-link">党建产品安全性</a>
    </div>
    <div class="navbar-buttons">
      <button class="register-btn">管理员登录</button>
      <button class="login-btn">登录</button>
    </div>
  </nav>
</template>

<style scoped>
.navbar-title {
  color : white;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #B22222; /* 深红色 */
  padding: 1rem 2rem;
}
.navbar-logo {
  display: flex;
  align-items: center;
}
.navbar-logo img {
  width: 40px;
  height: 40px;
  margin-right: 1rem;
}
.navbar-title .title-main {
  font-size: 1rem;
  font-weight: bold;
}
.navbar-title .title-sub {
  font-size: 0.875rem;
}
.navbar-title .title-description {
  font-size: 0.75rem;
}
.navbar-links {
  display: flex;
  gap: 1.5rem;
}
.nav-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}
.navbar-buttons {
  display: flex;
  gap: 1rem;
}
.register-btn,
.login-btn {
  background-color: #FFB347; /* 浅橙色 */
  color: #B22222;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}
.register-btn:hover {
  background-color: #FF8C00; /* 深橙色 */
}
.login-btn:hover {
  background-color: #FF8C00; /* 深橙色 */
}
</style>
